<template>
    <el-dialog class="tree-dialog" width="30%" :title="curTree.treeType" :visible.sync="showTreeDialog" append-to-body>
        <el-tree 
        :data="curTree.treeData" 
        show-checkbox   
        ref="eltree" 
        @check-change="onNodeChecked"
        @node-click="onNodeClick"
        ></el-tree>
        <div class="button-bar">
            <el-button @click="onCancelTree">取 消</el-button>
            <el-button type="primary" @click="onConfirmTree">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import treeMixin from './tree.mixin.js'
export default {
    mixins:[treeMixin],
    props:{
        treeType:{
            type:String,
            default:'dept',
            require:false
        },
        showTreeDialog:{
            type:Boolean,
            default:false,
            require:false
        }
    },
    data(){
        return{
            curTree:'departmentTree',
            departmentTree:{
                treeType:'选择部门',
                treeData:[],
                checkedNode:[]
            },

            districtTree:{
                treeType:'选择区域',
                treeData:[],
                checkedNode:[]
            },

            deptUserTree:{
                treeType:'选择部门人员',
                treeData:[],
                checkedNode:[]
            },

            areaUserTree:{
                treeType:'选择区域人员',
                treeData:[],
                checkedNode:[]
            },
        }
    },
    watch:{
        treeType(newVal){
            thisi.initTree(newVal)
        }

    },
    methods:{
        //初始化树数据
        initTree(treeType){
            if(treeType==='dept'){
                this.curTree=this.departmentTree
                this.getDepartmentTree()
            }else if(treeType==='district'){
                this.curTree=this.districtTree
                this.getDistrictTree()
            }else if(treeType==='deptUser'){
                this.curTree=this.deptUserTree
                this.getDeptUserTree()
            }else if(treeType==='area'){
                this.curTree=this.areaUserTree
                this.getAreaTreeUser()
            }
        },


        //查询部门树
        getDepartmentTree(){
            if(this.departmentTree.treeData.length!=0){
                return 
            }
            this.$http.getDeptTree()
            .then((res)=>{
                this.$set(this.tree,'departmentTree',res.data.data)
                this.$set(this.departmentTree,'treeData',res.data.data)
            }).catch((err)=>{
                throw(err)
            })
        },

        //查询区域树
        getDistrictTree(){
            if(this.districtTree.treeData.length!=0){
                return 
            }
            this.$http.getAreaTree()
            .then((res)=>{
                this.$set(this.tree,'districtTree',res.data.data)
                this.$set(this.districtTree,'treeData',res.data.data)
            }).catch((err)=>{
                throw(err)
            })
        },

        //查询部门人员树
        getDeptUserTree(){
            if(this.deptUserTree.treeData.length!=0){
                return 
            }
            this.$http.getDeptUserTree()
            .then((res)=>{
                this.$set(this.tree,'districtTree',res.data.data)
                this.$set(this.deptUserTree,'treeData',res.data.data)
            }).catch((err)=>{
                throw(err)
            })
        },

         //查询区域人员树
        getAreaTreeUser(){
            if(this.areaUserTree.treeData.length!=0){
                return 
            }
            this.$http.getAreaTreeUser()
            .then((res)=>{
                this.$set(this.tree,'districtTree',res.data.data)
                this.$set(this.areaUserTree,'treeData',res.data.data)
            }).catch((err)=>{
                throw(err)
            })
        },

        getTree(){
            switch(this.curTree){
                case 'departmentTree':return this.departmentTree;break;
                case 'districtTree':return this.districtTree;break;
                case 'deptUserTree':return this.deptUserTree;break;
                 case 'areaUserTree':return this.areaUserTree;break;
            }
        },
        
        //选择部门
        onNodeChecked(data, checked, indeterminate){
           this.$emit('onNodeChecked',data)
        },

        //节点点击
        onNodeClick(data, checked, indeterminate){
            this.$emit('onNodeClick',data)
        },

        //选择区域
        onDistrictSelect(){
            this.$refs.districtTree.setCheckedKeys([]);
            this.$refs.districtTree.setCheckedKeys([data.id]);

        },

        //确认
        onConfirmTree(){
            var checkedNode=this.$eltree.getCheckedNodes();
            this.$emit('onGetCheckedNodes',checkedNode)
            this.showTreeDialog=false
        },

        //取消
        onCancelTree(){
            this.$set(this.tree,'showTreeDialog',false)
            this.showTreeDialog=false
        },

    },
    
}
</script>
<style lang="scss" scoped>

</style>


